<template>
  <div class="bgc-white p24">
    <div class="flex-center-between">
      <a-space :size="24">
        <a-input-search v-model="companyOrSaleName" placeholder="销售名称/用工单位名称" @change="onRulesNameChange" />
        <a-range-picker
          :value="dateRange"
          :placeholder="['开始月份', '结束月份']"
          :mode="['month', 'month']"
          format="YYYY-MM"
          style="width: 240px"
          @panelChange="onPanelChange"
        />
        <a-input-search v-model="rulesName" placeholder="提成规则名称" @change="onRulesNameChange" />
      </a-space>
      <a-button type="primary" @click="calc">提成计算</a-button>
    </div>
    <a-spin :spinning="spinning">
      <a-table :dataSource="recordLst" :columns="calcColumns" :pagination="pagination" rowKey="id" class="mt24" @change="onTableChange" />
    </a-spin>
    <a-modal v-model="calcVisible" title="计算提成" @ok="calcOk">
      <a-form-item label="选择用工单位" :labelCol="{ span: 7 }" :wrapperCol="{ span: 14 }">
        <a-select
          v-model="companyIdList"
          :options="companyLst"
          showSearch
          :filterOption="filterOption"
          mode="multiple"
          placeholder="请选择"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="选择月份" :labelCol="{ span: 7 }" :wrapperCol="{ span: 14 }">
        <a-range-picker
          :value="calcDateRange"
          :placeholder="['开始月份', '结束月份']"
          :mode="['month', 'month']"
          format="YYYY-MM"
          style="width: 100%"
          @panelChange="onCalcPanelChange"
        />
      </a-form-item>
    </a-modal>
    <a-modal v-model="errVisible" title="提成计算异常结果" width="800px" @ok="onErrOk">
      <div>
        <div
          class="flex-center pl10"
          style="flex-flow: row; height: 35px; width: 100%; background-color: #fffbe6; border: 1px solid #ffe58f; border-radius: 5px"
        >
          <img style="width: 16px; height: 16px; margin-right: 5px" src="@/assets/icons/重复.png" />
          <span sytle="color:#55565D;font-size:14px;">
            <label class="redc">{{ errorCount }}</label
            >条数据计算失败
          </span>
        </div>
        <a-input-search v-model="term" placeholder="请输入用工单位" class="mv12" style="width: 200px" />
        <a-table
          :dataSource="errorLstFilter"
          :columns="calcErrColumns"
          :pagination="pagination2"
          :rowKey="(record) => `${record.companyName}_${record.month}`"
          @change="onTableChange2"
        />
      </div>
    </a-modal>
  </div>
</template>
<script>
import { saleRebatesRecordsReq, calculationRebatesReq, tileCompanyByUserReq } from "../api";
import { calcColumns, calcErrColumns } from "../funcs";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      term: "",
      spinning: false,
      calcVisible: false,
      errVisible: false,
      calcColumns,
      calcErrColumns,
      recordLst: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      pagination2: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      companyOrSaleName: "",
      rulesName: "",
      dateRange: null,
      calcDateRange: null,
      companyIdList: [],
      allCount: 0,
      errorCount: 0,
      successCount: 0,
      errorLst: [],
      companyLst: []
    };
  },
  computed: {
    errorLstFilter() {
      if (this.term) {
        return this.errorLst.filter((item) => item.companyName.includes(this.term));
      } else {
        return this.errorLst;
      }
    }
  },
  watch: {
    errorLstFilter(newVal) {
      this.pagination2.total = newVal.length;
    }
  },
  created() {},
  mounted() {
    this.onSearchChange();
    tileCompanyByUserReq()
      .then((res) => {
        this.companyLst = res.data.map((item) => ({
          label: item.name,
          value: item.id
        }));
      })
      .catch((err) => {
        console.log("tileCompanyByUserReq", err);
      });
  },
  methods: {
    onErrOk() {
      this.errVisible = false;
      this.onSearchChange();
    },
    onTableChange2(pagination) {
      this.pagination2.current = pagination.current;
      this.pagination2.pageSize = pagination.pageSize;
    },
    onRulesNameChange() {
      this.pagination.current = 1;
      this.onSearchChange();
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    calcOk() {
      const params = {
        companyIdList: this.companyIdList
      };
      if (this.calcDateRange && this.calcDateRange.length > 0) {
        const dates = this.calcDateRange.map((item) => item.format("YYYY-MM"));
        params["beginTime"] = dates[0];
        params["endTime"] = dates[1];
      }
      this.spinning = true;
      calculationRebatesReq(params)
        .then((res) => {
          this.calcVisible = false;
          this.allCount = res.data.allCount;
          this.errorCount = res.data.errorCount;
          this.successCount = res.data.successCount;
          this.errorLst = res.data.errorInfoList;
          this.spinning = false;
          if (this.errorLst && this.errorLst.length > 0) {
            this.term = "";
            this.errVisible = true;
          } else {
            this.$message.success("计算完成");
            this.onSearchChange();
          }
        })
        .catch((err) => {
          this.spinning = false;
          console.log("calculationRebatesReq", err);
        });
    },
    calc() {
      this.companyIdList = [];
      this.calcDateRange = null;
      this.calcVisible = true;
    },
    onCalcPanelChange(value) {
      this.calcDateRange = value;
    },
    onPanelChange(value) {
      this.dateRange = value;
      this.pagination.current = 1;
      this.onSearchChange();
    },
    onTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.onSearchChange();
    },
    onSearchChange() {
      const params = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      };
      if (this.companyOrSaleName) {
        params["companyOrSaleName"] = this.companyOrSaleName;
      }
      if (this.rulesName) {
        params["rulesName"] = this.rulesName;
      }
      if (this.dateRange && this.dateRange.length > 0) {
        const dates = this.dateRange.map((item) => item.format("YYYY-MM"));
        params["beginTime"] = dates[0];
        params["endTime"] = dates[1];
      }
      saleRebatesRecordsReq(params)
        .then((res) => {
          this.recordLst = res.data.entities;
          this.pagination.total = res.data.entityCount;
        })
        .catch((err) => {
          console.log("saleRebatesRecordsReq", err);
        });
    }
  }
};
</script>
<style lang="scss"></style>
